<template>
    <div id="swHomeLiquidLevelView" data-page="swHomeLiquidLevelView">
        <div class="sw-card">
            <div class="sw-card__head">
                <div class="sw-card__title">水池水箱液位</div>
                <div class="sw-card__desc">报警  <span id="swLiquidAlarmNum">0</span></div>
            </div>
            <div class="sw-card__body">
                <div class="swiper-container" id="swHomeLiquidLevelSwiper" style="flex:1">
                    <div class="swiper-wrapper" id="swHomeLiquidLevel">
                        <!-- <div class="sw-chart swiper-slide">
                            <div class="sw-chart__desc">
                                <div class="sw-chart__value"><span>0.2</span> Mpa</div>
                                <div class="sw-chart__name">某某某压力传感器压力传感器</div>
                            </div>
                            <div class="sw-chart__wrap"></div>
                        </div> -->
                    </div>
                    <div class="swiper-pagination" id="swHomeLiquidLevelSwiperPager" style="bottom: 0!important;"></div>
                </div>
            </div>
        </div>
    </div>
</template>
<style scoped></style>
<script>
    return {
        data: function () {
            return {
            }
        },
        methods: {
            getData: function () {
                var self = this
                var fontClassMap = {
                    "0": "color-3",
                    "10": "color-1",
                    "20": "color-2",
                    "30": "color-5",
                    "40": "color-8",
                };
                Dao.getAttentionFacsStatusSw({
                    queryType: 0,
                    orgIds: single_Orgid_wbdw,
                    code: 'waterLevel'
                }, function (data) {
                    // data = [
                    //     { name: '设备名称1', id: 1, value: 0.1, unit: 'MPa' },
                    //     { name: '设备名称2', id: 2, value: 0.2, unit: 'MPa' },
                    //     { name: '设备名称3', id: 3, value: 0.3, unit: 'MPa' }
                    // ]
                    self.removeAllSlides()
                    if (data && data.resultList.length > 0) {
                        $('#swLiquidAlarmNum').text(data.alarmCount)
                        $('#swHomeLiquidLevelView').show()
                        for (var i = 0; i < data.resultList.length; i++) {
                            var o = data.resultList[i]
                            for (var j = 0; j < o.analogInfo.length; j++) {
                                self.addChart(o, o.analogInfo[j])
                            }
                        }
                        self.bindRouteEvents()
                        //滑块只展示3个
                        let swaiperList = jQuery("#swHomeLiquidLevelSwiperPager").children();
                        // if (swaiperList.length > 3) {
                        //     let saveList = jQuery("#swHomeLiquidLevelSwiperPager .swiper-pagination-bullet").slice(0, 3);
                        //     jQuery("#swHomeLiquidLevelSwiperPager").empty().append(saveList);
                        // }
                        if (swaiperList.length == 1) {
                            jQuery("#swHomeLiquidLevelSwiperPager").hide()
                        } else if (swaiperList.length > 1) {
                            jQuery("#swHomeLiquidLevelSwiperPager").show()
                        }
                    } else {
                        $('#swLiquidAlarmNum').text(0)
                        $('#swHomeLiquidLevelView').hide()
                    }
                });
            },
            addChart(o, info) {
                var self = this
                var fontClassMap = {
                    "0": "color-3",
                    "10": "color-1",
                    "20": "color-2",
                    "30": "color-5",
                    "40": "color-8",
                };
                info.realTimeAnalogInfo = info.realTimeAnalogInfo || {
                    analogValue: 0,
                    analogUnits: ''
                }
                if(o.hasAnalog!=0){
                    var html = `<div class="swiper-slide" data-id="${o.id}"><div class="sw-chart">
                        <div class="sw-chart__desc">
                            <div class="sw-chart__value">
                                <span class="${fontClassMap[o.fireTType || 0]}">${info.realTimeAnalogInfo.analogValue.toFixed(2)}</span>
                                ${info.realTimeAnalogInfo.analogUnits}
                            </div>
                            <div class="sw-chart__name">${o.name}</div>
                        </div>
                        <div class="sw-chart__wrap" id="swHomeLiquidLevelGauge${o.id}${info.dataTypeId}" style="margin-top:0;"></div>
                    </div></div>`
                    $("#swHomeLiquidLevel").append(html);
                    self.drawClockChart(o.id, info)
                }else{
                    var html = `<div class="swiper-slide" data-id="${o.id}"><div class="sw-chart">
                        <div class="sw-chart__desc">
                            <div class="sw-chart__value">
                                <span class="${fontClassMap[o.fireTType || 0]}">${o.fireTTypeStatusInfo.statusAlias}</span>
                            </div>
                            <div class="sw-chart__name">${o.name}</div>
                        </div>
                        <div class="sw-chart__wrap" id="swHomeLiquidLevelGauge${o.id}${info.dataTypeId}" style="margin-top:0;">
                            <img src="${o.fireTTypeStatusInfo.statusPic}?imageView2/1/w/100/h/100" style="margin:10px 0 0 10px;width:100px;height:100px;">
                        </div>
                    </div></div>`
                    $("#swHomeLiquidLevel").append(html);
                }

                var swiper = app.swiper.get('#swHomeLiquidLevelSwiper');
                swiper.update(true); // 更新滑块
            },
            bindRouteEvents() {
                jQuery('#swHomeLiquidLevel .swiper-slide').off().click(function (e) {
                    var ctarget=e.currentTarget
                    app.router.navigate(`/eqmentMsg/` + ctarget.getAttribute('data-id') + `/`);
                })
            },
            removeAllSlides(){
                var swiper = app.swiper.get('#swHomeLiquidLevelSwiper');
                swiper&&swiper.removeAllSlides();
                swiper&&swiper.update();
            },
            initSwiper: function () {
                var mySwiper = new Swiper('#swHomeLiquidLevelSwiper', {
                    pagination: {
                        el: '#swHomeLiquidLevelSwiperPager',
                        dynamicBullets: true,
                    },
                });
            },
            drawClockChart: function (bizId, info) {
                var self = this;
                var dataTypeId = info.dataTypeId
                var dataTypeName = info.dataTypeName
                var currentAnalogValue = info.realTimeAnalogInfo.analogValue
                var currentAnalogUnits = info.realTimeAnalogInfo.analogUnits
                var _score = currentAnalogValue;
                var myChart = echarts.init(document.getElementById(`swHomeLiquidLevelGauge${bizId}${info.dataTypeId}`));
                var myOption = {
                    title: null,
                    tooltip: {
                        show: false,
                    },
                    xAxis3D: {
                        type: "category",
                        data: [""],
                    },
                    yAxis3D: {
                        type: "category",
                        data: [""],
                    },
                    zAxis3D: {
                        type: "value",
                    },
                    grid3D: {
                        show: false, //是否显示三维迪卡尔坐标
                        boxWidth: 80,
                        boxDepth: 20,
                        axisPointer: {
                            show: false,
                        },
                        viewControl: {
                            alpha: 15, //视角绕 x 轴，即上下旋转的角度(与beta一起控制视野成像效果)
                            beta: 60, //视角绕 y 轴，即左右旋转的角度
                            rotateSensitivity: 0, // 不能旋转
                            zoomSensitivity: 0, // 不能缩放
                        },
                        top: "-8%", //组件的视图离容器上侧的距离
                        left:'-3%'
                    },
                    series: [
                        {
                            type: "bar3D",
                            barSize: 100,
                            data: [
                                [
                                    0,
                                    0,
                                    currentAnalogValue,
                                ],
                            ],
                            stack: "stack",
                            shading: "lambert",
                            itemStyle: {
                                //柱条样式
                                color: "#428ceb",
                                opacity: 0.9,
                            },
                            emphasis: {
                                label: {
                                    show: false,
                                },
                            },
                        },
                        {
                            type: "bar3D",
                            barSize: 100,
                            data: [[0, 0, info.thresholdMax-currentAnalogValue]],
                            stack: "stack",
                            shading: "lambert",
                            itemStyle: {
                                //柱条样式
                                color: "#428ceb",
                                opacity: 0.5,
                            },
                            emphasis: {
                                label: {
                                    show: false,
                                },
                            },
                        },
                    ],
                };
                myChart.setOption(myOption, true);
                myChart.off('touchstart')
            },
        },
        on: {
            pageAfterIn: function (e, page) {
                var self = this;
                this.initSwiper()
                self.getData();
            }
        }
    }
</script>